﻿<div>

    <script type="text/javascript">
        $(function () {
            var t = $("#t1").datagrid({
                title: 'test datagrid',
                width: 1200,
                height: 400,
                method: "get",
                url: "datagrid/datagrid-data.json",
                idField: 'ID',
                remoteSort: false,
                frozenColumns: [[
                    { field: 'ck', checkbox: true },
                    { field: 'ID', title: 'ID', width: 80, sortable: true }
                ]],
                columns: [[
                    { field: 'Code', title: '编号(Code)', width: 120, editor: "text" },
                    { field: 'Name', title: '名称(Name)', width: 140, editor: "text" },
                    { field: 'Age', title: '年龄(Age)', width: 120, editor: "numberbox" },
                    { field: 'Height', title: '身高(Height)', width: 140, editor: "numberbox" },
                    { field: 'Weight', title: '体重(Weight)', width: 140, editor: "numberbox" },
                    { field: 'CreateDate', title: '创建日期(CreateDate)', width: 180, editor: "datebox" },
                    { field: 'undefined', title: '测试(不存在的字段)', width: 150 }
                ]],
                rowContextMenu: [
                    { text: "编辑", iconCls: "icon-edit", handler: function (e, index) { t.datagrid("beginEdit", index); } }
                ],
                pagination: true,
                //enableHeaderClickMenu: false,
                //enableHeaderContextMenu: false,
                //enableRowContextMenu: false,
                autoFocusField: "Name",
                autoEditing: false,          //该属性启用双击行时自定开启该行的编辑状态
                extEditing: true,           //该属性启用行编辑状态的 ExtEditing 风格效果，该属性默认为 true。
                singleEditing: true         //该属性启用datagrid的只允许单行编辑效果，该属性默认为 true。
            });

            $(document).click(function (e) {
                var body = t.datagrid("getPanel");
                if (!$.contains(body[0], e.target)) {
                    t.datagrid("endEdit", 1);
                }
            });


            var i = 20,
                getRow = function () {
                    return { ID: ++i, Code: i, Name: "TestName" + i, Age: 18, Height: 159, Weight: 49, CreateDate: "2008-02-11" };
                };
            $("#Button1").click(function () {
                t.datagrid("appendRow", getRow());
            });

            $("#Button2").click(function () {
                t.datagrid("insertRow", { index: 1, row: getRow() });
            });

            $("#Button3").click(function () {
                t.datagrid("updateRow", { index: 1, row: { Name: "TestName" + ++i } });
            });

            $("#Button4").click(function () {
                t.datagrid("loadData", []);
            });
        });
    </script>

    <h2>jEasyUI DataGrid Extensions - 仿 ExtRowEditing 编辑风格 - 单行编辑状态 RowEditing</h2>
    <p>该部分扩展由文件 jeasyui.extensions.datagrid.js 实现。</p>
    <hr />
    <p>双击表格中的任意行，启用该行的编辑状态</p>
    <p>在行编辑状态下，按 Enter 键保存该行并立即跳到下一行的编辑状态中；按 ESC 键立即取消该行的编辑状态同时修改的数据不保存</p>
    <hr />
    <input id="Button1" type="button" value="appendRow测试数据" />
    <input id="Button2" type="button" value="insertRow测试数据" />
    <input id="Button3" type="button" value="updateRow测试数据" />
    <input id="Button4" type="button" value="清除所有数据" />
    <hr />
    <table id="t1"></table>
    <hr />
    由于受到 xxx.json 文件数据源不能进行逻辑分析处理的限制，此处点击翻页后，仅页码更新而数据不会更新

</div>